import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from "@angular/core";
import {SharedService} from "../shared-service";
import {CommService} from "../comm-service";
import {MyhttpService} from "../myhttp.service";

declare var $: any;

@Component({
  template: `
    <div class="sjys comp" [style.width]="compw" [style.height]="comph" [style.top]="topv"
         [style.left]="leftv">
      <div class="content">
        <div class="title">
          <div class="title_text">{{comptitle}}</div>
        </div>
        <div class="body">
          <div class="sjaproom iecrollkf chromescrollkf">
            <div class="smallKslx1">
              <ng-container *ngIf="sjblistksxl1.length">
                <div class="dayitem" [style.width]="dayitemwidthksxl1" *ngFor="let item of sjblistksxl1;index as index">
                  <div class="day">{{item.rq}}</div>
                  <div class="Am">
                    <div class="nr">{{item.nr1}}</div>
                  </div>
                  <div class="Pm">
                    <div class="nr">{{item.nr2}}</div>
                  </div>
                </div>
              </ng-container>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: [
    ".sjys{position:absolute;background-color:#fff;border:5px solid #ccc; }",
    ".content{width: calc(100%);height: calc(100%);}",
    ".content>.title{position: relative;width: 100%;height: auto;padding: 10px; border-bottom: 1px solid #ccc; color: rgb(138 143 151);}",
    ".title>.title_text{height: 15px;line-height: 15px;font-size: 15px;  width: auto;border-left: 5px solid #1477F3;padding-left: 10px}",
    ".content>.body{position: relative;width: 100%;height: calc(100% - 24px); padding: 16.5px 10px;}",
    ".sjaproom{width: calc(100%);height: 270px;overflow: auto;}",
    ".sjaproom>.smallKslx1{width: 100%;height: 100%;}",
    ".sjtitle1{position:absolute;top: -20px;left: 0px; text-align: center;height: 30px;line-height: 30px; font-size: 16px;color: #31fcff;width: 100%}",
    ".dayitem{height:calc(100% - 10px);margin-top: 10px; padding: 0px 2px;float: left}",
    ".day{width: 100%;height: 30px;line-height: 30px;background-color: rgb(206, 232, 255);text-align: center;color:rgb(138 143 151);font-size: 13px;font-weight: bold}",
    ".Am{width: 100%;height: calc(50% - 15px);background-color: rgb(245, 250, 255);padding-top: 20px}",
    ".Pm{width: 100%;height: calc(50% - 15px);background-color: rgb(245, 250, 255)}",
    ".nr{width: 80%;text-align: center;margin: 0px auto}",
  ]
})
export class ZhzsSjysComponent implements OnInit, OnDestroy {
  compw: string = "0px";
  comph: string = "0px";
  topv: string = "0px";
  leftv: string = "0px";
  comptitle: string = "试卷运送时间安排表";
  s_ksjhbh: string;

  dayitemwidthksxl1: string = "0px";
  sjblistksxl1: any[] = [];


  getdata(): void {
    if (!this.s_ksjhbh) {
      return
    }
    const url = "sjgz/zsymlsfw/sjyssjapb";
    this.itservice.kwPtPost(url, {
      ksjhbh: this.s_ksjhbh
    }).subscribe(resp => {
      this.commservice.handResponse("get", url, resp, (arg1, resp, arg2) => {
        if (arg1) {
          if (arg2) {
            const yssjapListv = resp.yssjapList ? resp.yssjapList : [];
            if (!yssjapListv.length) {
              return
            }
            this.sjblistksxl1 = yssjapListv.map((item) => {
              const rqv = item.rq;
              const btv = item.bt;
              const nrlist = btv ? btv.split(",") : [];
              return {
                rq: rqv,
                nr1: nrlist[0],
                nr2: nrlist[1]
              }
            });
            this.dayitemwidthksxl1 = `${100 / this.sjblistksxl1.length}%`;
          }
        } else {
          this.getdata();
        }
      });
    });
    // this.sjblistksxl1 = [{
    //   rq: '1月21日',
    //   nr1: "各市、州、区县前往【印刷厂】拉试卷",
    //   nr2: ""
    // }, {
    //   rq: '1月22日',
    //   nr1: "试卷在【保密室】存放",
    //   nr2: ""
    // }, {
    //   rq: '1月23日',
    //   nr1: "考前试卷从【保密室】运送至【考点】",
    //   nr2: "考后试卷从【考点】运送到【保密室】"
    // }, {
    //   rq: '1月24日',
    //   nr1: "考前试卷从【保密室】运送至【考点】",
    //   nr2: "考后试卷从【考点】运送到【保密室】"
    // }, {
    //   rq: '1月25日',
    //   nr1: "考前试卷从【保密室】运送至【考点】",
    //   nr2: "考后试卷从【考点】运送到【保密室】"
    // }, {
    //   rq: '1月26日',
    //   nr1: "各市、州、区县【保密室】试卷运送至【评卷中心】进行回收",
    //   nr2: ""
    // }];
    // this.dayitemwidthksxl1 = `${100 / this.sjblistksxl1.length}%`;
  }

  /**
   * 组件在 显示面板中的位置+ 大小
   */
  initcompPositionSize_ctrshow(): void {
    // 大小 位置
    this.compw = this.o.compw + "px";
    this.comph = this.o.comph + "px";
    this.topv = this.o.topv + "px";
    this.leftv = this.o.leftv + "px";
    const lastsearchlx = this.o.paramchangelx;
    const compdata = this.o.paramchangedata;
    if (lastsearchlx == "pcompkqchange") {
      this.s_ksjhbh = compdata.ksjhbh;
      this.getdata();
    } else {
      // lastsearchlx 变为非init类型 ，配置确定后再加载动态组件
      this.s_ksjhbh = compdata.ksjhbh;
      this.getdata();
    }
  }

  @Input() o: any;
  @Output() outhander: EventEmitter<any> = new EventEmitter<any>();

  constructor(private commservice: CommService,
              private itservice: MyhttpService,
              private sharedService: SharedService) {
    this.sharedService.changeEmitted$.subscribe(resp => {
    });
  }

  ngOnInit() {
    this.commservice.log("-- 【 compkey=sjys】--被父组件动态加载init....", this.o);
    this.initcompPositionSize_ctrshow();
  }

  ngOnDestroy() {

  }

}
